<script setup>
import { ref } from 'vue'
const user=ref()
//列表数据模型
import {msgAddService, msgListBySignService, msgListUserService} from '@/api/msg.js'
import { formatDate } from'@/utils/formdata'
import {DArrowRight} from "@element-plus/icons-vue";
const users = ref([])
const userId = ref()
const title = ref('')
const userList = async () => {
  let params = {
    user: user.value ? user.value : null
  }
  let result = await msgListUserService(params);
  //渲染视图
  users.value = result.data;
  users.value.forEach((item) => {
    item.createTime = formatDate(item.createTime)
  });
}
//调用函数
userList()//获取列表
const getMsgData = async (row) => {
  let result = await msgListBySignService(row.userId);
  msgData.value = result.data;
  msgData.value.forEach((item) => {
    item.msgTime = formatDate(item.msgTime)
  });
  console.log("msgSign",row.userId)
  console.log("result",result)
};
const freshMsgData = async (sign) => {
  let result = await msgListBySignService(sign);
  msgData.value = result.data;
  msgData.value.forEach((item) => {
    item.msgTime = formatDate(item.msgTime)
  });
};
const msgData = ref();
const adminInput = ref(""); // 客服输入的消息
const msgSign = ref("");
const receiver = ref("");
import useUserInfoStore from '@/stores/userInfo.js'
import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore();
// 发送消息
const sendMessage = async () => {
  if (adminInput.value.trim() === "") return; // 如果输入为空，不发送
  let params = {
    sender: userInfoStore.info.adminName,
    senderId: userInfoStore.info.adminId,
    receiver: receiver.value,
    receiverId: msgSign.value,
    content: adminInput.value,
    knownState: '0',
    msgSign: msgSign.value
  };
  let result = await msgAddService(params);
  await freshMsgData(msgSign.value)
  // 清空输入框
  adminInput.value = "";
};
//每隔一秒刷新一次消息
// setInterval(async () => {
//   await freshMsgData(msgSign.value)
// }, 1000);
</script>

<template>
    <div class="common-layout">
        <el-container class="container">
            <el-aside class="aside-container">
                <el-card>
                    <template #header>
                        <div class="header">  
                            <el-input  placeholder="请输入" v-model="user" style="width: 220px"></el-input>
                            <el-button style="margin-left: 10px;" type="primary" @click="userList()">搜索</el-button>
                        </div>
                    </template>
                    <el-scrollbar height="484">
                        <el-table :data="users" style="width: 100%">
                            <el-table-column prop="createTime" label="Date" width="150" />
                            <el-table-column prop="user" label="Name" width="auto" />
                            <el-table-column label="" width="auto">
                              <template #default="scope">
                                <el-button size="small" :icon="DArrowRight" @click="getMsgData(scope.row);receiver=scope.row.user;msgSign=scope.row.userId"></el-button>
                              </template>
                            </el-table-column>
                        </el-table>
                    </el-scrollbar>  
                </el-card>
            </el-aside>
            <el-container>
                <el-header class="header-container" style="">{{receiver?receiver:"content"}}</el-header>
                <el-main class="main-container">
                    <el-scrollbar class="message-list">
                        <div v-for="(msg, index) in msgData" :key="index" class="message-item">
                            <div v-if="msg.sender === receiver" class="user-message">
                            <div class="message-content">{{ msg.content }}</div>
                            <div class="message-time">{{ msg.msgTime }}</div>
                            </div>
                            <div v-else class="admin-message">
                            <div class="message-content">{{ msg.content }}</div>
                            <div class="message-time">{{ msg.msgTime }}</div>
                            </div>
                        </div>
                    </el-scrollbar>
                </el-main>
                <el-footer class="footer-container">
                    <el-input 
                        placeholder="请输入" 
                        style="width: 95%;"
                        v-model="adminInput"
                        type="text"
                        @keyup.enter="sendMessage"
                    />
                    <el-button style="margin-left: 10px;" type="primary" @click="sendMessage()">发送</el-button>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<style scoped lang="scss">
.container {
    background-color: white;
    border: 3px solid #e5e8e8;
    border-radius: 5px ;
    height: 600px;
}
.aside-container {
    background-color: white;
    height: 100%;
    width:350px;
    box-sizing: border-box;
    border-radius: 5px;
    border-right: 2px solid #e5e8e8 ;
    box-shadow:5px rgba(0, 0, 0, 0.1);
}
.header-container {
    background-color: white;
    height: 20px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main-container {
    background-color: white;
    box-sizing: border-box;
    border: 2px solid #cacfd2 ;
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}
.footer-container {
    background-color: white;
    height: 60px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chat-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.message-list {
  overflow: auto;
  width: 100%;
  max-height: 400px; /* 设置最大高度，超出部分显示滚动条 */
}

.message-item {
  margin-bottom: 10px;
  width: 100%;
}

.user-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.user-message .message-content {
  background-color: #e1f5fe;
  border: 1px solid #b3e5fc;
  border-radius: 5px;
  padding: 8px 12px;
  max-width: 70%;
}

.user-message .message-time {
  font-size: 0.8rem;
  color: #888;
  margin-top: 2px;
}

.admin-message {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 10px;
}

.admin-message .message-content {
  background-color: #e2e2e2;
  border: 1px solid #817a7c;
  border-radius: 5px;
  padding: 8px 12px;
  max-width: 70%;
}

.admin-message .message-time {
  font-size: 0.8rem;
  color: #888;
  margin-top: 2px;
}
</style>